<script>
import { getCommentsApi, setCommentApi } from '@/api'
export default {
    props: ['currentCom'],
    data() {
        return {
            list: [],
            loading: false,
            finished: false,
            content: '',
            offset: undefined,
            // 结束的标识
            end_id: 0
        }
    },
    methods: {
        async onLoad() {
            const res = await getCommentsApi({
                type: 'c',
                source: this.currentCom.com_id,
                offset: this.offset
            })
            this.list.push(...res.data.data.results)
            this.offset = res.data.data.last_id
            this.end_id = res.data.data.end_id
            this.loading = false
            if (this.offset === this.end_id) {
                this.finished = true
            }
        },
        async sendCom() {
            const res = await setCommentApi({
                target: this.currentCom.com_id,
                content: this.content,
                art_id: this.$route.query.id
            })
            console.log(res);
            // 将返回的回复数据添加到list中前面
            this.list.unshift(res.data.data.new_obj)
            this.content = ''
            this.currentCom.reply_count += 1
        }
    },
    components: {
        replyCell: () => import('@/components/reply-cell/index.vue')
    }
}
</script>

<template>
  <div class="reply">
    <replyCell :currentCom="currentCom" />
    <div class="line">-- 全部回复 --</div>
    <!-- 评论回复列表 -->
    <van-list @load="onLoad" v-model="loading" :finished="finished" finished-text="没有更多了">
        <replyCell v-for="(item, index) in list" :key="index" :currentCom="item" />
    </van-list>
    <!-- 回复输入框 -->
    <van-field class="myfield" v-model="content" clearable placeholder="请输入评论">
        <template #button>
            <van-button @click="sendCom" size="small" type="info">发布</van-button>
        </template>
    </van-field>
  </div>
</template>



<style lang="less">
.reply {
    .line {
        margin: 30px 0;
        font-size: 14px;
        color: #666;
        text-align: center;
    }
    .myfield {
        position: fixed;
        bottom: 0;
        left: 0;
    }
}
</style>